<template>
  <!-- 搜索框 -->
  <div class="search-box">
    <van-search
      v-model.trim="content"
      shape="round"
      placeholder="请输入地名"
      :clearable="false"
      style="border-radius: 20px; padding: 5px"
    />
    <div class="place" v-if="list != null">
      <div class="no-place" v-if="list.length == 0">无结果</div>
      <div class="place-list" v-else>
        <el-scrollbar height="150px">
          <div
            class="place-item"
            v-for="item in list"
            @click="toTargetPlace(item.lonlat)"
          >
            {{ item.name }}
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
  <!-- 定位 -->
  <div class="located" @click="toLocated">
    <i class="iconfont icon-located"></i>
  </div>
</template>
<script setup>
//导入hook
import { useGetLoaction } from "./hooks/useGetLocation"
const { content, list, toTargetPlace, toLocated } = useGetLoaction()
</script>
<style lang="stylus" scoped>
@import 'http://at.alicdn.com/t/c/font_3793112_j647ts1vom8.css'
.search-box
  position fixed
  top 50px
  left 50px
  .place
    background-color #fff
    margin-top 5px
    border-radius 10px
    color #333
    .no-place
      text-align center
      color #999
      padding 20px
    .place-list
      padding 10px 0
      .place-item
        padding 2px 0 2px 15px
        &:hover
          background-color #eee
.located
  position fixed
  bottom 120px
  right 10px
  background-color #fff
  padding 4px
  border-radius 15px
  i
    font-size 28px
    color #333
</style>
